<template>
	<view>
		<!-- 信息 -->
		<view class="block_1 flex-col">
			<view class="box_3 flex-row justify-between">
				<image class="single-avatar_1" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/410c62baef87f42c6e53530684d8ee68" />
				<view class="group_1 flex-col justify-between">
					<view class="group_2 flex-row justify-between">
						<text class="text_2">季节电影</text>
						<view class="tag_1 flex-col">
							<text class="text_3">金卡会员</text>
						</view>
					</view>
					<text class="text_4">您将享受金卡会员权益</text>
				</view>
			</view>
			<view class="box_4 flex-col">
				<view class="box_5 flex-row">
					<text class="text_5">总佣金</text>
					<image class="icon_2" referrerpolicy="no-referrer" src="../../static/user/recommend/ess.png" />
					<text class="text_6">06月份/收益</text>
				</view>
				<view class="box_6 flex-row">
					<text class="text_7">345.6</text>
					<button class="button_1 flex-col" @click="onClick_1">
						<text class="text_8">点击提现</text>
					</button>
					<text class="text_9">500</text>
				</view>
			</view>
		</view>
		<!-- 业绩数据 -->
		<view class="block_2 flex-col">
			<view class="box_7 flex-row justify-between">
				<view class="group_3 flex-col"></view>
				<text class="text_10">业绩数据</text>
			</view>
			<view class="box_8 flex-row justify-between">
				<view class="text-group_1 flex-col justify-between">
					<text class="text_11">¥500.00</text>
					<text class="text_12">返消费本金</text>
				</view>
				<view class="text-group_2 flex-col justify-between">
					<text class="text_13">未达标/已返</text>
					<view class="text_14">状态</view>
				</view>
			</view>
			<view class="box_10 flex-col"></view>
			<view class="box_8 flex-row justify-between">
				<view class="text-group_1 flex-col justify-between">
					<text class="text_11">¥898.79</text>
					<text class="text_12">提点15%共计</text>
				</view>
				<view class="text-group_2 flex-col justify-between">
					<text class="text_13">未提现</text>
					<view class="text_14">状态</view>
				</view>
			</view>
			<view class="box_10 flex-col"></view>
			<!-- tab -->
			<view class="column">
				<view style="display: flex;align-items: center;">
					<image style="width: 37rpx;height: 37rpx;margin-right: 10rpx;"
						src="../../static/user/recommend/1.png" mode=""></image>
					历史提现
				</view>
				<view style="display: flex;align-items: center;">
					<image style="width: 37rpx;height: 37rpx;margin-right: 10rpx;"
						src="../../static/user/recommend/2.png" mode=""></image>
					继续推荐
				</view>
				<view style="display: flex;align-items: center;">
					<image style="width: 37rpx;height: 37rpx;margin-right: 10rpx;"
						src="../../static/user/recommend/3.png" mode=""></image>
					收益回顾
				</view>
			</view>
		</view>
		<!-- 111 -->
		<view class="block_3 flex-col">
			<view class="list_1 flex-col">
				<view class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }"
					v-for="(item, index) in loopData0" :key="index">
					<view class="box_12 flex-row justify-between">
						<image class="image_4" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
						<view class="box_13 flex-col">
							<view class="text-wrapper_3 flex-row justify-between">
								<text class="text_20">{{item.lanhutext0}}</text>
								<text class="text_21">{{item.lanhutext1}}</text>
							</view>
							<view class="group_4 flex-col"></view>
							<view class="text-wrapper_4 flex-row justify-between">
								<text class="text_22">{{item.lanhutext2}}</text>
								<text class="text_23">{{item.lanhutext3}}</text>
							</view>
						</view>
					</view>
					<view class="text-wrapper_5 flex-row">
						<text class="text_24">{{item.lanhutext4}}</text>
						<text class="text_25">{{item.lanhutext5}}</text>
						<text class="text_26">{{item.lanhutext6}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loopData0: [{
						lanhuBg0: 'url(https://lanhu.oss-cn-beijing.aliyuncs.com/58c9ff3c628bf02413e590cd6af30fdb) -14px -2px no-repeat',
						lanhuimage0: 'https://lanhu.oss-cn-beijing.aliyuncs.com/bed37b717f09ebeb33f20ccc68f74501',
						lanhutext0: '微信号',
						lanhutext1: 'rhdkjjdskj56',
						lanhutext2: '消费额',
						lanhutext3: '提点额',
						lanhutext4: '季节电影',
						lanhutext5: '120.00',
						lanhutext6: '计入消费返本',
					},
					{
						lanhuBg0: 'url(https://lanhu.oss-cn-beijing.aliyuncs.com/8491db6f085d8b923f7f915b39f329a9) -7px 0px no-repeat',
						lanhuimage0: 'https://lanhu.oss-cn-beijing.aliyuncs.com/d495cbb66ecfa6fd9d1fdb2ce4b60771',
						lanhutext0: '微信号',
						lanhutext1: 'rhdkjjdskj56',
						lanhutext2: '消费额',
						lanhutext3: '提点额',
						lanhutext4: '白野兽',
						lanhutext5: '120.00',
						lanhutext6: '计入消费返本',
					},
					{
						lanhuBg0: 'url(https://lanhu.oss-cn-beijing.aliyuncs.com/938157628256d5b2ee71de43db91378d) -14px -2px no-repeat',
						lanhuimage0: 'https://lanhu.oss-cn-beijing.aliyuncs.com/6ecae9597e40d85821f6c324a1ae2e00',
						lanhutext0: '微信号',
						lanhutext1: 'rhdkjjdskj56',
						lanhutext2: '消费额',
						lanhutext3: '提点额',
						lanhutext4: '季节电影',
						lanhutext5: '120.00',
						lanhutext6: '计入消费返本',
					},
				],
				constants: {},
			};
		},
		methods: {
			onClick_1() {
				alert(1);
			},
		},
	};
</script>

<style scoped lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.block_3 {
		width: 750rpx;
		height: 833rpx;
		margin-bottom: 1rpx;

		.list_1 {
			width: 674rpx;
			height: 684rpx;
			justify-content: space-between;
			margin: 39rpx 0 0 35rpx;

			.list-items_1 {
				height: 222rpx;
				background-size: 729rpx 665rpx;
				margin-bottom: 9rpx;
				width: 674rpx;

				.box_12 {
					width: 631rpx;
					height: 111rpx;
					margin: 22rpx 0 0 28rpx;
					display: flex;
					justify-content: space-between;

					.image_4 {
						width: 108rpx;
						height: 108rpx;
					}

					.box_13 {
						width: 447rpx;
						height: 95rpx;
						margin-top: 16rpx;

						.text-wrapper_3 {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 216rpx;
							height: 23rpx;
							margin-left: 3rpx;

							.text_20 {
								width: 64rpx;
								height: 21rpx;
								overflow-wrap: break-word;
								color: rgba(41, 41, 41, 1);
								font-size: 21rpx;
								font-family: PingFangSC-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 21rpx;
							}

							.text_21 {
								width: 135rpx;
								height: 22rpx;
								overflow-wrap: break-word;
								color: rgba(0, 0, 0, 1);
								font-size: 23rpx;
								font-family: PingFangSC-Heavy;
								font-weight: 900;
								text-align: right;
								white-space: nowrap;
								line-height: 23rpx;
								margin-top: 1rpx;
							}
						}

						.group_4 {
							background-color: rgba(233, 230, 228, 1);
							width: 447rpx;
							height: 2rpx;
							margin-top: 19rpx;
						}

						.text-wrapper_4 {
							width: 317rpx;
							height: 24rpx;
							margin: 27rpx 0 0 18rpx;
							display: flex;
							justify-content: space-between;

							.text_22 {
								width: 64rpx;
								height: 21rpx;
								overflow-wrap: break-word;
								color: rgba(4, 4, 4, 1);
								font-size: 21rpx;
								font-family: PingFangSC-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 21rpx;
								margin-top: 3rpx;
							}

							.text_23 {
								width: 63rpx;
								height: 21rpx;
								overflow-wrap: break-word;
								color: rgba(70, 70, 70, 1);
								font-size: 21rpx;
								font-family: PingFangSC-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 21rpx;
							}
						}
					}
				}

				.text-wrapper_5 {
					width: 543rpx;
					height: 25rpx;
					margin: 24rpx 0 40rpx 44rpx;
					display: flex;

					.text_24 {
						width: 85rpx;
						height: 21rpx;
						overflow-wrap: break-word;
						color: rgba(58, 58, 58, 1);
						font-size: 21rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 900;
						text-align: center;
						white-space: nowrap;
						line-height: 21rpx;
					}

					.text_25 {
						width: 93rpx;
						height: 22rpx;
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1);
						font-size: 31rpx;
						font-family: Arial-BoldMT;
						font-weight: 700;
						text-align: center;
						white-space: nowrap;
						line-height: 31rpx;
						margin: 3rpx 0 0 88rpx;
					}

					.text_26 {
						width: 143rpx;
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 900;
						text-align: center;
						white-space: nowrap;
						line-height: 24rpx;
						margin: 2rpx 0 0 134rpx;
					}
				}
			}
		}

		.box_14 {
			position: relative;
			width: 674rpx;
			height: 100rpx;
			background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/b391dac516a215f9293da4c3ca8f8268) -14rpx -2rpx no-repeat;
			background-size: 729rpx 102rpx;
			margin: 9rpx 0 1rpx 35rpx;

			.image_5 {
				width: 107rpx;
				height: 78rpx;
				margin: 22rpx 0 0 29rpx;
			}

			.section_1 {
				width: 447rpx;
				height: 44rpx;
				margin: 38rpx 15rpx 0 76rpx;

				.text-wrapper_6 {
					width: 216rpx;
					height: 23rpx;
					margin-left: 3rpx;

					.text_27 {
						width: 64rpx;
						height: 21rpx;
						overflow-wrap: break-word;
						color: rgba(41, 41, 41, 1);
						font-size: 21rpx;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						text-align: center;
						white-space: nowrap;
						line-height: 21rpx;
					}

					.text_28 {
						width: 135rpx;
						height: 22rpx;
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1);
						font-size: 23rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 900;
						text-align: right;
						white-space: nowrap;
						line-height: 23rpx;
						margin-top: 1rpx;
					}
				}

				.box_15 {
					background-color: rgba(233, 230, 228, 1);
					width: 447rpx;
					height: 2rpx;
					margin-top: 19rpx;
				}
			}

			.image_6 {
				position: absolute;
				left: 15rpx;
				top: 27rpx;
				width: 147rpx;
				height: 73rpx;
			}
		}
	}

	.column {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 40rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 27rpx;
		color: #000;
		line-height: 25rpx;
	}

	.block_2 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10px;
		width: 750rpx;
		height: 485rpx;
		margin-top: 75rpx;

		.box_7 {
			width: 145rpx;
			height: 33rpx;
			margin: 34rpx 0 0 28rpx;
			display: flex;

			.group_3 {
				background-color: rgba(211, 7, 21, 1);
				width: 5rpx;
				height: 31rpx;
				    margin-top: 3px;
			}

			.text_10 {
				width: 125rpx;
				height: 32rpx;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-family: SourceHanSansCN-Bold;
				font-weight: 700;
				text-align: center;
				white-space: nowrap;
				line-height: 35rpx;
				margin-top: 1rpx;
				margin-left: 10rpx;
			}
		}

		.box_8 {
			width: 605rpx;
			height: 71rpx;
			margin: 48rpx 0 0 99rpx;
			display: flex;
			justify-content: space-between;

			.text-group_1 {
				width: 124rpx;
				height: 66rpx;
				margin-top: 5rpx;

				.text_11 {
					width: 124rpx;
					height: 26rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 34rpx;
					font-family: SourceHanSansCN-Medium;
					font-weight: 500;
					text-align: center;
					white-space: nowrap;
					line-height: 35rpx;
				}

				.text_12 {
					width: 119rpx;
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-family: SourceHanSansCN-Regular;
					font-weight: normal;
					text-align: center;
					white-space: nowrap;
					line-height: 35rpx;
					margin: 17rpx 0 0 4rpx;
				}
			}

			.text-group_2 {
				width: 183rpx;
				height: 69rpx;
				text-align: center;

				.text_13 {
					width: 183rpx;
					height: 35rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 34rpx;
					font-family: SourceHanSansCN-Medium;
					font-weight: 500;
					text-align: center;
					white-space: nowrap;
					line-height: 35rpx;
				}

				.text_14 {
					width: 100%;
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-family: SourceHanSansCN-Regular;
					font-weight: normal;
					text-align: center;
					white-space: nowrap;
					line-height: 35rpx;
				}
			}
		}

		.box_9 {
			background-color: rgba(231, 231, 231, 1);
			width: 651rpx;
			height: 1rpx;
			margin: 30rpx 0 0 49rpx;
		}

		.text-wrapper_1 {
			width: 568rpx;
			height: 32rpx;
			margin: 31rpx 0 0 96rpx;
			display: flex;
			justify-content: space-between;

			.text_15 {
				width: 124rpx;
				height: 26rpx;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 34rpx;
				font-family: SourceHanSansCN-Medium;
				font-weight: 500;
				text-align: center;
				white-space: nowrap;
				line-height: 35rpx;
				margin-top: 3rpx;
			}

			.text_16 {
				width: 101rpx;
				height: 32rpx;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 34rpx;
				font-family: SourceHanSansCN-Medium;
				font-weight: 500;
				text-align: center;
				white-space: nowrap;
				line-height: 35rpx;
			}
		}

		.text-wrapper_2 {
			width: 547rpx;
			height: 24rpx;
			margin: 21rpx 0 0 86rpx;

			.text_17 {
				width: 144rpx;
				height: 24rpx;
				overflow-wrap: break-word;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular;
				font-weight: normal;
				text-align: center;
				white-space: nowrap;
				line-height: 35rpx;
			}

			.text_18 {
				width: 47rpx;
				height: 23rpx;
				overflow-wrap: break-word;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular;
				font-weight: normal;
				text-align: center;
				white-space: nowrap;
				line-height: 35rpx;
			}
		}

		.box_10 {
			background-color: rgba(231, 231, 231, 1);
			width: 746rpx;
			height: 1rpx;
			margin: 44rpx 0 0 4rpx;
		}

		.box_11 {
			width: 701rpx;
			height: 43rpx;
			margin: 44rpx 0 28rpx 30rpx;

			.icon_3 {
				width: 34rpx;
				height: 29rpx;
				margin-top: 3rpx;
			}

			.text_19 {
				width: 107rpx;
				height: 26rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 27rpx;
				font-family: Adobe Heiti Std R;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 25rpx;
				margin: 4rpx 0 0 23rpx;
			}

			.image_2 {
				width: 1rpx;
				height: 33rpx;
				margin: 3rpx 0 0 42rpx;
			}

			.image-text_1 {
				width: 171rpx;
				height: 42rpx;
				margin: 1rpx 0 0 46rpx;

				.icon_4 {
					width: 45rpx;
					height: 42rpx;
				}

				.text-group_3 {
					width: 106rpx;
					height: 26rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 27rpx;
					font-family: Adobe Heiti Std R;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 25rpx;
					margin-top: 3rpx;
				}
			}

			.image_3 {
				width: 1rpx;
				height: 33rpx;
				margin: 3rpx 0 0 56rpx;
			}

			.image-text_2 {
				width: 164rpx;
				height: 37rpx;
				margin-left: 56rpx;

				.icon_5 {
					width: 37rpx;
					height: 37rpx;
				}

				.text-group_4 {
					width: 107rpx;
					height: 26rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 27rpx;
					font-family: Adobe Heiti Std R;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 25rpx;
					margin-top: 4rpx;
				}
			}
		}
	}

	.block_1 {
		position: relative;
		width: 100%;
		height: 326rpx;
		background: url('../../static/user/recommend/bg.png') no-repeat;
		background-position: bottom;
		padding-top: 1px;

		.box_2 {
			box-shadow: 0px 2px 0px 0px rgba(204, 204, 204, 0.6);
			background-color: rgba(255, 255, 255, 1);
			width: 750rpx;
			height: 149rpx;

			.image_1 {
				width: 713rpx;
				height: 26rpx;
				margin: 32rpx 0 0 23rpx;
			}

			.nav-bar_1 {
				width: 750rpx;
				height: 79rpx;
				margin: 14rpx 0 2rpx 0;

				.icon_1 {
					width: 21rpx;
					height: 34rpx;
					overflow-wrap: break-word;
					color: rgba(35, 35, 35, 1);
					font-size: 47rpx;
					font-family: SimHei;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 72rpx;
					margin: 20rpx 0 0 33rpx;
				}

				.text_1 {
					width: 132rpx;
					height: 32rpx;
					overflow-wrap: break-word;
					color: rgba(35, 35, 35, 1);
					font-size: 34rpx;
					font-family: SimHei;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 34rpx;
					margin: 19rpx 309rpx 0 255rpx;
				}
			}
		}

		.box_3 {
			width: 463rpx;
			height: 109rpx;
			margin: 43rpx 0 138rpx 54rpx;
			display: flex;

			.single-avatar_1 {
				width: 106rpx;
				height: 106rpx;
				margin-top: 3rpx;
			}

			.group_1 {
				width: 316rpx;
				height: 92rpx;
				margin-left: 40rpx;

				.group_2 {
					width: 316rpx;
					height: 48rpx;
					display: flex;

					.text_2 {
						width: 128rpx;
						height: 31rpx;
						overflow-wrap: break-word;
						color: rgba(251, 251, 251, 1);
						font-size: 32rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 600;
						text-align: left;
						white-space: nowrap;
						line-height: 32rpx;
						margin-top: 16rpx;
					}

					.tag_1 {
						height: 48rpx;
						background: url('../../static/user/recommend/vip.png') 100% no-repeat;
						background-size: 100% 100%;
						width: 171rpx;

						.text_3 {
							width: 100rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							color: rgba(108, 42, 9, 1);
							font-size: 24rpx;
							font-family: SourceHanSansCN-Normal;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 58rpx;
							margin: 18rpx 0 0 61rpx;
						}
					}
				}

				.text_4 {
					width: 270rpx;
					height: 26rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 27rpx;
					font-family: SourceHanSansCN-Regular;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 27rpx;
					margin: 18rpx 0 0 1rpx;
				}
			}
		}

		.box_4 {
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
			background-color: rgba(255, 255, 255, 1);
			border-radius: 10px;
			height: 150rpx;
			width: 627rpx;
			position: absolute;
			left: 60rpx;
			top: 210rpx;

			.box_5 {
				width: 563rpx;
				height: 26rpx;
				margin: 35rpx 0 0 29rpx;

				.text_5 {
					width: 72rpx;
					height: 24rpx;
					overflow-wrap: break-word;
					color: rgba(102, 102, 102, 1);
					font-size: 25rpx;
					font-family: Adobe Heiti Std R;
					font-weight: normal;
					text-align: center;
					white-space: nowrap;
					line-height: 25rpx;
					margin-top: 1rpx;
				}

				.icon_2 {
					width: 38rpx;
					height: 26rpx;
					margin-left: 13rpx;
				}

				.text_6 {
					width: 135rpx;
					height: 24rpx;
					overflow-wrap: break-word;
					color: rgba(102, 102, 102, 1);
					font-size: 24rpx;
					font-family: Adobe Heiti Std R;
					font-weight: normal;
					text-align: center;
					white-space: nowrap;
					line-height: 25rpx;
					margin: 1rpx 0 0 305rpx;
				}
			}

			.box_6 {
				width: 521rpx;
				height: 36rpx;
				display: flex;
				margin: 16rpx 0 37rpx 34rpx;

				.text_7 {
					width: 93rpx;
					height: 27rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 37rpx;
					font-family: Arial-BoldMT;
					font-weight: 700;
					text-align: center;
					white-space: nowrap;
					line-height: 36rpx;
					margin-top: 4rpx;
				}

				.button_1 {
					background-color: #f8a137;
					border-radius: 18px;
					height: 19px;
					margin-left: 12px;
					width: 73px;
					display: flex;
					align-items: center;
					justify-content: center;

					.text_8 {
						justify-content: center;
						text-align: center;
						overflow-wrap: break-word;
						color: white;
						font-size: 9px;
						font-family: SourceHanSansCN-Medium;
						font-weight: 500;
						text-align: center;
					}
				}

				.text_9 {
					width: 61rpx;
					height: 27rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 37rpx;
					font-family: Arial-BoldMT;
					font-weight: 700;
					text-align: center;
					white-space: nowrap;
					line-height: 36rpx;
					margin-left: 211rpx;
				}
			}
		}
	}
</style>